<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet"
	href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script
	src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Patient Test</title>
<style type="text/css">
.bs-example {
	margin-left: 0;
	margin-right: 0;
	background-color: #fff;
	border-width: 1px;
	border-color: #ddd;
	border-radius: 4px 4px 0 0;
	box-shadow: none;
}
</style>

<script type="text/javascript">
	$(document)
			.ready(
					function() {

						$("#isQuerySelected").change(function() {
							if (this.checked) {
								$("#query").prop("disabled", false);
							} else {
								$("#query").prop("disabled", true);
							}
						});

						$("#btnGet")
								.click(

										function() {

											var isCheck = $('#isQuerySelected')
													.is(':checked');
											var query = $("#query").val();
											$
													.ajax({
														type : "POST",
														dataType : "json",
														contentType : "application/json",
														url : "rest/message/patient",
														data : JSON
																.stringify({
																	"customQuery" : isCheck,
																	"query" : query
																}),

														success : function(
																data,
																textStatus,
																jqXHR) {

															if (data.responseCode == "QUERY_ERROR") {
																$('.bg-danger')
																		.show();

																return;
															} else {
																$('.bg-danger')
																		.hide();
															}

															var relational = data.profiles[0];
															var owl = data.profiles[1];
															var triple = data.profiles[2];

															$(
																	'#profile tr:last')
																	.after(
																			'<tr><td>'
																					+ relational.timeInMs
																					+ '</td><td>'
																					+ owl.timeInMs
																					+ '</td><td>'
																					+ triple.timeInMs
																					+ '</td></tr>');

															for (var i = 0; i < data.nodes.length; i++) {

																var json = data.nodes[i];

																$("#result")
																		.append(
																				json.key
																						+ ": "
																						+ json.value
																						+ "\n");

															}
															$("#result")
																	.append(
																			"-------------------------\n");

														}
													});
										});
					});
</script>
</head>
<body>



	<div class="row" style="margin-top: 20px">



		<div class="col-md-5" style="margin-left: 40px;">
			<div class="panel panel-success">
				<div class="panel-heading">
					<input type="checkbox" id="isQuerySelected" /><label
						class="panel-title">Click to user custom query</label>
				</div>
				<div class="panel-body">
					<textarea style="font-size: 9pt" id="query" rows="11" cols="100"
						placeholder="Write Query To Execute" disabled></textarea>
				</div>
			</div>


		</div>
		<div class="col-md-1">
			<button id="btnGet" class="btn btn-success">Execute Query</button>
		</div>
		<div class="col-md-5" style="margin-left: 20px;">
			<div class="panel panel-success">
				<div class="panel-heading">
					<h3 class="panel-title">Query result:</h3>
				</div>
				<div class="panel-body">
					<textarea style="font-size: 9pt;" id="result" rows="11" cols="100"
						disabled></textarea>
				</div>
			</div>

		</div>

	</div>

	<div class="row" style="margin-top: 10px; margin-bottom: 10px">
		<div class="col-md-4"></div>
		<div class="col-md-5">
			<p style="margin-top: 10px; margin-bottom: 10px" class="bg-danger"
				hidden="true">Syntaxt error in query!</p>
		</div>
	</div>

	<div class="row">

		<div class="col-md-11" style="margin-left: 40px;">

			<table id="profile" class="table table-striped">
				<thead>
					<tr>

						<th>Rlational Database (ms)</th>
						<th>Owl File (ms)</th>
						<th>Triple Store (ms)</th>
					</tr>
				</thead>
				<tbody>


				</tbody>

			</table>
		</div>


	</div>
<!-- 	<div class="row">

		<div class="col-md-11" style="margin-left: 40px;">

			<table id="footer" class="table table-striped">
				<tfoot>
					<tr>

						<th>0ms</th>
						<th>0ms</th>
						<th>0ms</th>
					</tr>
				</tfoot>

			</table>
		</div>


	</div> -->


</body>
</html>